Server-Side Rendering vs. Client-Side Rendering
Learn about the different rendering types and decide which one is suitable for our application.
Introduction#
In terms of APIs, one of our goals is to make the applications perform better. Let’s take an example of a video hosting site. We might notice that it takes a while for the thumbnails of the videos to load, as shown in the illustration on the right. Suppose this video hosting site utilizes an optimized API gateway. However, the content may still be displayed after a significant delay. There are multiple reasons for having higher latency, with rendering being the most common. Rendering is described as the process of utilizing HTML, CSS, and JavaScript code into an interactive web page or depicting the web page in the browser.
In terms of APIs, one of our goals is to make the applications perform better. Let’s take an example of a video hosting site. We might notice that it takes a while for the thumbnails of the videos to load, as shown in the illustration on the right. Suppose this video hosting site utilizes an optimized API gateway. However, the content may still be displayed after a significant delay. There are multiple reasons for having higher latency, with rendering being the most common. Rendering is described as the process of utilizing HTML, CSS, and JavaScript code into an interactive web page or depicting the web page in the browser.
In this lesson, we’ll explore numerous rendering techniques and determine when to utilize each one.
Server-side rendering (SSR)#
Server-side rendering (SSR) is a technique that generates a complete HTML document on the server and sends it to the client as a response to a request. The browser parses the HTML document and starts displaying it. On the initial load, the page is static and noninteractive. However, once the JavaScript file has been downloaded from the server, it modifies the DOM, and the page becomes interactive. DOM stands for Document Object Model. It's a programming interface used to represent an HTML document's content as a tree. The DOM provides structure to the HTML elements so we can easily access and manage them. Let's understand how server-side rendering works:
1 of 8
2 of 8
3 of 8
4 of 8
5 of 8
6 of 8
7 of 8
8 of 8
Note: The term "Paint" means when a pixel is visible to the user.
Let’s assume the following HTML document is received from the server. The document contains some content with a link:
The browser starts parsing the above document and displays the corresponding content. When a user clicks the “Careers” page link, the browser sends another request to the server and reloads the complete web page. We assume that both pages (current and “Careers”) have the same header and footer. So only the inner content needs to be updated. However, SSR reloads the complete page, which incurs the load on the server and the usage of unnecessary bandwidth. Therefore, developers mostly use SSR for when the web page initially loads.
Pros and Cons of Server-Side Rendering
Rendering type | Pros | Cons |
Server-side rendering |
|
|
When should SSR be used?#
SSR works well when we need the initial load of the web page to be fast.
If a web page consists of static content, then SSR is suitable for rendering the content quickly.
SSR favors SEO because the browser populates the page without waiting for the JavaScript to render.
Static SSR is used to generate a static HTML document on the server. The server sends a lightweight HTML document to the client. Mostly, portfolio websites contain the same content for all users. Static SSR performs better because the server sends the static content to every user.
Dynamic SSR is used to generate the dynamic HTML document on the server. It sends heavy-weight HTML documents to the client. For example, a social media website dynamically generates a different profile page for each user. Dynamic SSR does not perform well because the server has to populate a complete HTML document for each user.
Client-side rendering (CSR)#
Client-side rendering (CSR) generates the complete web page in the browser instead of on the server. All the content, whether it is static or dynamic, is handled on the client side. The server sends the empty HTML file (which means no HTML content is populated except the basic structure of the HTML file) with JavaScript code or a link to it. The browser executes this JavaScript code to generate the web page.
Let's understand how CSR updates or renders the content in the browser:
1 of 8
2 of 8
3 of 8
4 of 8
5 of 8
6 of 8
7 of 8
8 of 8
Let’s assume the following HTML document is received from the server. The document contains only the <div> </div> tags with the main ID. The content is populated after the <script> tag on the client-side.
The content creation on the client-side can be handled using multiple frameworks such as React, Vue, Angular, and so on. These frameworks allow rerendering of specific DOM elements to update the data or user interface.
Pros and Cons of Client-Side Rerendering
Rendering type | Pros | Cons |
Client-side rendering |
|
|
When should CSR be used?#
It is preferable to use it for websites that update their content frequently.
If the web page consists of dynamic content, then CSR is good for rendering the dynamic content quickly.
If SEO (search engine optimization) is not a goal of the website, then we can use CSR.
AJAX stands for Asynchronous JavaScript and XML. This approach allows the browser to fetch specific data from the server and renders the new content without refreshing the page. For more information about AJAX, see this article.
Prerendering is another technique where the HTML of a page is pregenerated on the server. When the user navigates to this page, the prepopulated HTML document is fetched from the server and starts painting the document on the screen. Once the browser executes the client-side JavaScript, the web page becomes interactive.
Discussion#
From the details mentioned above, we can see that both SSR and CSR have their pros and cons, and there is no clear winner. Today's websites and applications are also full of rich features and require both the advantages of SSR and CSR at different levels and hierarchies. Using just SSR for the entire application may degrade the application's performance and further depreciate over time because we might add additional load onto the server. However, If we use CSR to bypass the load on the server, the initial load of the page might increase. A suitable option is to use a mixture of both techniques to utilize the advantages of both approaches and improve user experience.
We can take the example of a social media application that primarily uses SSR with minimal CSR to render its website pages. In contrast, others may do the complete opposite depending on their requirements. For example, YouTube uses a combination of both approaches. To achieve this, YouTube uses SPF (structured page fragments) for static and dynamic loading of the web page's content.
Quiz
Assume a website takes 3 seconds to load on the first visit without having any network issues. On the second visit, a website takes only 1 second to load. In your opinion, which rendering method has been used?
Client-side rendering
Client-side rendering reduces load time after an initial load because it allows the browser to cache the document and load it from the cache, instead of fetching the same document from the server.
Server-side rendering
Both A and B
Summary#
In this lesson, we discussed different rendering schemes and learned which is preferred for each use case. Primarily, we looked at user-perceived latency and learned how to minimize it for a better experience.
The Role of Idempotency in API Design
Quiz on Important API Concepts - I